<template>
  <div class="superNoteBox" @keydown="typingAni" @keyup="typingDoneAni" @keypress="keyPressAni">
    <div :class="'toolBar ' + mod.className">
      <div class="logo"><img :src="logoSource" alt=""><span>super note</span></div>
      <div class="storage">
        <span :class="'iconfont ' + status.icon"></span><span class="statusText">
          {{ status.text }}
        </span>
      </div>
      <div class="download" v-if="isShowDownloadBtn"><span @click="downloadDoc">{{ downloadText }}</span></div>
      <span :class="'mod iconfont ' + mod.icon" @click="changeMod()" v-if="isShowModBtn"></span>
      <span class="mod iconfont icon-bangzhu" @click="help()"></span>
    </div>
    <div class="editArea">
      <div :class="'input ' + mod.className">
        <textarea name="" id="" cols="30" rows="10" :class="'mainType ' + mod.className" aria-setsize="false"
          v-model="inputText" @input="onTyping"></textarea>
      </div>
      <div :class="'output ' + mod.className" v-html="outputText">
      </div>
    </div>
    <div class="mask" v-if="false"></div>
    <div :class="'helpView ' + mod.className" v-if="false">
      <div class="titleBar">如何应用到我的博客？</div>
      <div class="content">
        <span>https://gitee.com/zhu_yongbo/super-note/blob/master/README.md</span>
      </div>
    </div>
  </div>
</template>

<script>
import formatMarkdown from '@/utils/formatMarkdown'
const marked = require('marked')
import hljs from "highlight.js";
import toast from 'showtips'
import dirtyLanguageList from '@/assets/dirtyLanguageList.json'
export default {
  name: 'superNote',
  data() {
    return {
      outputText: "",
      eventNameList: ["done", "error", "going", "doubt"], //分别对应四种状态
      status: {
        icon: "icon-chenggong1",
        text: "欢迎使用"
      },
      keyUpTime: null,
      downloadText: "下载",
      mod: {
        className: "light",
        icon: "icon-qingtian"
      },
      isShowModBtn: true,
      isShowDownloadBtn: false
    }
  },
  computed: {
    logoSource() {
      return require(`@/assets/superNote${this.mod.className}.png`)
    }
  },
  mounted() {
    this.setStorage2View()
  },
  methods: {
    changeMod() {
      this.isShowModBtn = false
      if (this.mod.className == "light") {
        console.log("change to dark")
        this.mod.className = 'dark'
        this.mod.icon = 'icon-yewan'
      } else {
        console.log("change to light")
        this.mod.className = 'light'
        this.mod.icon = 'icon-qingtian'
      }
      window.localStorage.setItem('darkMod', this.mod.className == "dark");
      setTimeout(() => {
        this.isShowModBtn = true
      }, 0)
    },
    downloadDoc() {
      toast.showToast(2, dirtyLanguageList.list[parseInt(Math.random() * (dirtyLanguageList.list.length - 0)) + 0])
      this.downloadText = "没做下载"
    },
    setStorage2View() {
      if (window.localStorage.getItem('superNode')) {
        this.inputText = window.localStorage.getItem('superNode')
        this.onTyping()
        this.typingDoneAni()
      }
      console.log(window.localStorage.getItem('darkMod'))
      if (window.localStorage.getItem('darkMod') == "true") {
        this.changeMod()
      }
    },
    forceUpdate() {
      this.$forceUpdate()
      this.onTyping()
    },
    markedParse() {
      let inputText = formatMarkdown.format(JSON.stringify(this.inputText))
      this.outputText = marked.parse(inputText, {
        breaks: true
      })
    },
    typingAni() {
      this.status.icon = "icon-c typing"
      this.status.text = "正在打字"
      if (this.keyUpTime) clearTimeout(this.keyUpTime)
      let ani = setTimeout(() => {
        this.status.icon = "icon-c"
        clearTimeout(ani)
      }, 100)
    },
    typingDoneAni() {
      if (this.keyUpTime) clearTimeout(this.keyUpTime)
      window.localStorage.setItem('superNode', this.inputText);
      this.keyUpTime = setTimeout(() => {
        this.status.icon = "icon-chenggong1"
        this.status.text = "已保存"
      }, 3000)
    },
    keyPressAni() {
      // console.log("keyPress")
    },
    onTyping(e) {
      this.markedParse()
      this.bindEvents()
      hljs.initHighlightingOnLoad();
    },
    bindEvents() {
      this.$nextTick(() => {
        for (let eventName of this.eventNameList) {
          // 生成元素时 使id == 其中一个状态，然而这也会导致有很多id一样的元素，在这里分别给他们绑定事件
          document.querySelectorAll(`span[id="${eventName}"]`).forEach(item => {
            item.addEventListener('click', e => {
              this.eventsController(eventName, e.target.nextSibling.data)
            })
          })
        }
      })
    },
    /**
    * 事件处理函数
    * @param type --eventName
    * @param nextSibling --其后面跟的文字
    */
    eventsController(type, nextSibling) {
      let regExp = null
      let replaceText = ""
      switch (type) {
        case "done":
          regExp = new RegExp(`.*>> +(${nextSibling})`, "g")
          replaceText = "->"
          break
        case "error":
          regExp = new RegExp(`.*<< +(${nextSibling})`, "g")
          replaceText = ">>"
          break
        case "going":
          regExp = new RegExp(`.*-> +(${nextSibling})`, "g")
          replaceText = ">>"
          break
        case "doubt":
          regExp = new RegExp(`.*\\?\\? +(${nextSibling})`, "g")
          replaceText = ">>"
          break
        default:
          console.error("bad events")
          return
      }
      this.inputText = this.inputText.replace(regExp, replaceText + " $1")
      this.forceUpdate()
    }
  }
}
</script>
<style  lang="less">
@color-done: #06b92e;
@color-error: #d71c1c;
@color-going: #1e80d1;
@color-doubt: #ffb222;
@bgcolor-done: #c1ffce;
@cbgolor-error: #ffd9d9;
@cbgolor-going: #cde9ff;
@cbgolor-doubt: #ffede6;

.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 9;
}

.helpView {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 99;

  .titleBar {
    font-size: 26px;
    text-align: left;
    padding-bottom: 20px;
  }
}

.helpView.dark {
  background: #252526;
}

.mod {
  padding: 0;
  transition: 0.2s;
  min-width: 27px;
}

.mod:hover {
  background: #eee;
  color: #333;
  padding: 5px;
  border-radius: 100px;
  cursor: pointer;
  transition: 0.2s;
}


.typing {
  position: relative;
}

.typing::after {
  content: "";
  position: absolute;
  left: 13.9%;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 6px;
  background: @color-done;
  box-shadow: 0 0 10px 2px @color-done;
  border-radius: 100%;
}

.block {
  position: relative;
  padding-left: 20px;
}



.block::before {
  content: "";
  height: 100%;
  width: 4px;
  position: absolute;
  left: 0;
  top: 0;
  background: #ddd;
}

code {
  background: #1e1e1e;
  color: #3f9ccc;
  border-radius: 5px;
  padding: 20px;
  display: block;
  margin: 10px 0;
  font-size: 18px;

  .keyword {
    color: #569cd6;
  }

  .attr {
    color: #9cdcfe;
  }

  .number {
    color: #a7cea8;
  }

  .title {
    color: #dcdc90;
  }

  .params {
    color: #ffb417;
  }

  .variable {
    color: #3f9ccc;
  }

  .language-xml {
    color: #ce9178;
  }

  .comment {
    color: #6a9955;
  }

  .string {
    color: #ce9178;
  }

  .subst,
  .property {
    color: #2c7ad6;
  }

  #copy {
    display: none;
    opacity: 0;
  }
}

.todoBox {
  border-radius: 5px;
  padding: 20px;
  margin: 5px 0;

  .iconfont {
    padding-right: 10px;
    cursor: pointer;
  }
}

.done {
  color: @color-done;
  background: @bgcolor-done;
}

.error {
  color: @color-error;
  background: @cbgolor-error;
}

.going {
  color: @color-going;
  background: @cbgolor-going;
}

.icon-c {
  color: @color-going;
}

.icon-chenggong1 {
  color: @color-done;
}

.doubt {
  color: @color-doubt;
  background: @cbgolor-doubt;
}

.codeArea:hover {
  #copy {
    display: inline-block;
    opacity: 1;
    transition: 0.5s;
  }
}

.superNoteBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .editArea {
    flex: 1;
    display: flex;
    padding: 0;
  }

  >div {
    padding: 20px;
  }

  .input {
    flex: 1;
    border-right: 2px solid #eee;

    .mainType {
      resize: none;
      outline: none;
      height: 100%;
      width: 100%;
      padding: 20px;
      font-size: 24px;
      border: none;
    }
  }

  .output {
    flex: 1;
    width: 0;
    text-align: left;
    padding: 20px;
    max-height: calc(100vh - 60px);
    overflow: scroll;
  }

  .toolBar {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >div {
      min-width: 100px;
    }

    .download {
      span {
        padding: 8px 20px;
        cursor: pointer;
        border-radius: 100px;
        transition: 0.2s;
      }

      span:hover {
        background: @cbgolor-going;
        color: @color-going;
        transition: 0.2s;
      }
    }

    .storage {
      flex: 1;
      justify-content: center;
      align-items: center;

      .statusText {
        font-family: "幼圆";
        font-weight: thin;
        padding-right: 30px;
      }

      .iconfont {
        padding-right: 20px;
      }
    }

    .logo {
      user-select: none;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

      img {
        height: 100%;
        object-fit: cover;
        padding-right: 10px;
      }
    }
  }
}

.light {
  background: #fff;
  color: #333;
}

.dark {
  background: #363b40;
  color: #fff;

  code {
    background: #333333;
  }
}

.input.dark {
  border-right: 1px solid #333;
}

.icon-yewan::before,
.icon-qingtian::before {
  animation: rotateIn 0.5s forwards linear;
  display: inline-block;
}

@keyframes rotateIn {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 8px; // 高度会在横向滚动时生效
  cursor: pointer;
}

::-webkit-scrollbar-thumb {
  background: #1e1e1e2c; // 鼠标移入滑块变红
  border-radius: 5px; // 滑块圆角
}

::-webkit-scrollbar-thumb:hover {
  background: #a5a5a5; // 滑块颜色
}
</style>
